<template>
    <mian-layout @refresh="resetForm('search_data')">
        <template v-slot:conTop>
            <el-form size="mini" :inline="true" :model='search' ref="search_data" class="demo-form-inline search-form">
                <el-form-item label="广告位名称" prop="adPlaceName">
					<el-input v-model="search.adPlaceName" placeholder="请输入广告位名称"></el-input>
				</el-form-item>
                <el-form-item label="广告商" prop="merchantName">
					<el-input v-model="search.merchantName" placeholder="请输入广告商"></el-input>
				</el-form-item>
                <el-form-item label="投诉结果" prop="status">
					<el-select v-model="search.status" placeholder="选择投诉结果">
                        <el-option  label="请选择" value=""> </el-option>
						<el-option  label="投票中" :value="1"> </el-option>
					    <el-option  label="违规" :value="2"> </el-option>
                        <el-option  label="不违规" :value="3"> </el-option>
					</el-select>
				</el-form-item>
                <el-form-item label="投放时间" prop="dataTime">
                        <el-date-picker v-model="dataTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" />
                    </el-form-item>
                <el-form-item>
					<el-button type="primary" plain  icon="el-icon-search" @click="doSearch">搜索</el-button>
                        <el-button icon="el-icon-refresh-right" @click="resetForm('search_data')">重置</el-button>
				</el-form-item>
            </el-form>   
        </template>

        <my-table :loading="loading" :lists="tableData" @selectionChange="tableSelect" @pageChange="handleChange" :sequence="true" :page='page'>
            <el-table-column property="adPlaceTitle" label="广告位名称"  align='center'></el-table-column>
            <el-table-column property="adPlaceOwnerName" label="广告位持有人"  align='center'></el-table-column>
            <el-table-column property="arLandmarkName" label="所属地标"  align='center'></el-table-column>
            <el-table-column property="adPlaceMerchantName" label="广告商"  align='center'>--</el-table-column>
            <el-table-column property="" label="保证金"  align='center'>--</el-table-column>
            <el-table-column property="adDays" label="投放周期"  align='center'>--</el-table-column>
            <el-table-column property="" label="投诉结果"  align='center'>
                <template slot-scope="scope">
                    <span v-if="scope.row.status==1">投票中</span>
                    <span v-else-if="scope.row.status==2">违规</span>
                    <span v-else-if="scope.row.status==3">不违规</span>
                </template>
            </el-table-column>
            <el-table-column property="userName" label="投诉用户"  align='center'></el-table-column>
            <el-table-column property="createTime" label="投诉时间"  align='center'></el-table-column>

            <el-table-column prop="operation" align='center' label="操作" :width="180">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-search" @click="goLook(scope.row)">查看</el-button>
                    <el-button v-if="scope.row.status==1" type="warning" plain size="mini" @click="sentence(scope.row)">裁定</el-button>
                </template>
            </el-table-column>
        </my-table>
        <my-dialog v-if="dialogVisible" :show.sync="dialogVisible" :showBtn="false" width="500px" title="广告内容投诉直接裁定">
            <el-form size="small" :model="ruleForm" ref="ruleForm" label-width="40px" class="demo-ruleForm">
                <el-form-item label="裁定" prop="name">
                    <el-radio-group v-model="stval">
                        <el-radio :label="2">内容违规</el-radio>
                        <el-radio :label="3">内容不违规</el-radio>
                    </el-radio-group>
                </el-form-item>  
                <div class="cd-tips">
                    裁定后，系统将自动为还没有投票的用户，投与裁定一致的票，最终达到与裁定结果一致的结果，裁定后，保证金的分配机制不变
                </div>
            </el-form> 
            <div style="text-align: right">
                <el-button  size="small" @click="dialogVisible=false" icon="el-icon-close">取 消</el-button>
                <el-button type="primary" size="small" icon="el-icon-check" @click="saveCd">确 定</el-button>
            </div>
        </my-dialog> 
    </mian-layout>
</template>
<script>
import myTable from '@/components/public/myTable';
import goodsCategory from '@/components/public/goodsCategory.vue';
import {
  get_complaint_record,
  complaint_sentence
} from '@/api/collext'
import myDialog from '@/components/public/myDialog';
export default {
    components:{
      myTable,
      goodsCategory,
      myDialog
    },
    data(){
        return{
            search:{
                adPlaceName:'',
                merchantName:'',
                status:'',
                endTime:'',
                startTime:''
            },
            dataTime:'',
            page:{
                pageSize:10,
                pageIndex:1,
			    total:0,
            },
            loading:true,
            tableData:[],
            multipleSelectionIds:[],
            itemData:{},
            dialogVisible:false,
            stval:''
        }
    },
    created(){
        this.getList()
    },
    mounted(){
        
    },
    methods:{
        getList(callback){
            this.loading = true
            if(this.dataTime){
                this.search.startTime = this.dataTime[0]
                this.search.endTime = this.dataTime[1]
            }
            get_complaint_record({
                limit: this.page.pageSize,
                page: this.page.pageIndex,
                ...this.search
            }).then(res=>{
                this.loading = false
                this.tableData = res.data
                this.page.total = res.total
                callback && callback()
            })
        },
        doSearch(){
            this.page.pageIndex = 1;
            this.getList();
        },
        refreshData(){
            this.page.pageIndex = 1;
            this.getList();
        },
        tableSelect(data){
            console.log("GGGG:",data)
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getList();
        },
        reSetData(){
            this.page.pageIndex = 1;
            this.getList();
        },
        sentence(item){
            this.itemData = item
            this.dialogVisible = true
        },

        saveCd(){
            if(!this.stval){
                return this.$message.warning('请选择裁定结果')
            }
            complaint_sentence({
                adPlaceJobComplaintRecordId:this.itemData.adPlaceJobComplaintRecordId,
                status:this.stval
            }).then(res=>{
                if(res.success){
                    this.$message.success('裁定成功！')
                    this.getList()
                    this.dialogVisible = false
                }else{
                    this.$message.warning(res.message)
                }
            })
        },

        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dataTime = []
            for (const key in this.search) {
               this.search[key] = ''
            }
            this.page.pageIndex = 1
            this.getList()
        },
        // goEdit(item,onlyLook){
        //     //sessionStorage.setItem('details',JSON.stringify(item))
        //     this.$store.commit('tagsView/SET_REGETDATA',this.getList)  // 设置需要刷新的方法，修改后返回需要刷新数据
        //     this.$router.push(`/goods/add?id=${item.adPlaceJobComplaintRecordId}&onlyLook=${onlyLook}`)
        // },
        // goAdd(){
        //     this.$store.commit('tagsView/SET_REGETDATA',this.getList)  // 设置需要刷新的方法，修改后返回需要刷新数据
        //     this.$router.push('/goods/add')
        // },
        goLook(item){
            this.$store.commit('tagsView/SET_REGETDATA',this.getList)  // 设置需要刷新的方法，修改后返回需要刷新数据
            this.$router.push(`/advertising/complaint/${item.adPlaceJobComplaintRecordId}`)
        }
    }
}
</script>

<style lang="scss" scoped>
    .myanfbtntabbox{
        position: relative;
        z-index: 10;
        .mybtn{
            position: absolute;
            z-index: 10;
            right: 0;
            top: 0;
        }
    }
    .tbimgbox{
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 50px!important;
            height: 50px!important;
            max-width: 200px;
        }
    }
    .cd-tips{
        font-size: 12px;
        color: #f32929;
        padding: 10px 0 20px 0;
        line-height: 22px;
    }
</style>